---
title: هيكل المشروع
description: تعلم كيفية تنظيم مشروع مع أسترو.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

مشروع أسترو الجديد الذي تم إنشاؤه من CLI `create astro`  يتضمن بالفعل بعض الملفات والمجلدات. و أخرى، سوف تقوم بإنشاءها بنفسك وتضيف إلى بنية ملفات أسترو الحالية.

إليك كيفية تنظيم مشروع أسترو ، وبعض الملفات التي ستجدها في مشروعك الجديد.

## المجلدات والملفات
يستفيد أسترو من تصميم مجلد من أجل مشروعك.يجب أن يتضمن كل جذر مشروع أسترو المجلدات والملفات التالية:

- `*/src` - رمز مصدر المشروع الخاص بك (المكونات والصفحات والأنماط ، إلخ)
- `*/public` - ما ليس بكود ، أصولك الجاهزة (الخطوط ، الرموز ، إلخ)
- `package.json` - بيان المشروع.
- `astro.config.mjs` - ملف تكوين أسترو. (مُستَحسَن)
- `tsconfig.json` - ملف تكوين TypeScript. (مُستَحسَن)

### مثال شجرة المشروع
قد يبدو دليل مشروع أسترو الشائع هكذا:

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - social-image.png
- src/
  - components/
    - Header.astro
    - Button.jsx
  - layouts/
    - PostLayout.astro
  - pages/
    - posts/
      - post1.md
      - post2.md
      - post3.md
    - index.astro
  - styles/
    - global.css
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `/src`

المجلد `src`  هو المكان الذي يعيش فيه معظم رمز مصدر المشروع. هذا يتضمن:

- [الصفحات](/ar/basics/astro-pages/)
- [تخطيطات](/ar/basics/layouts/)
- [مكونات أسترو](/ar/basics/astro-components/)
- [مكونات إطار واجهة المستخدم (React, etc.)](/ar/guides/framework-components/)
- [أنماط (CSS, Sass)](/ar/guides/styling/)
- [Markdown](/ar/guides/markdown-content/)

يقوم أسترو  بمعالجة  و تحسين ، وحزم ملفات `/src`  لإنشاء موقع الويب النهائي الذي يتم شحنه إلى المتصفح. على عكس المجلد الثابت `public/` ، تم تصميم ملفات `src/` الخاصة بك والتعامل معها من قبل أسترو.

لا يتم إرسال بعض الملفات (مثل مكونات أسترو) إلى المتصفح كما هو مكتوب ولكن يتم تقديمها بدلاً من ذلك إلى HTML ثابت. يتم إرسال الملفات الأخرى (مثل CSS) إلى المتصفح ولكن قد يتم تحسينها أو تجميعها مع ملفات CSS الأخرى للأداء.

:::tip
بينما يصف هذا الدليل بعض الاتفاقيات الشائعة المستخدمة في مجتمع أسترو ، فإن المجلدات التي تحتفظ بها أسترو هي `src/pages/` و `src/content/`. أنت حر في إعادة تسمية أي مجلدات أخرى وإعادة تنظيمها بطريقة تناسبك بشكل أفضل.
:::

### `src/pages`

[الصفحات](/ar/basics/astro-pages/) هي نوع خاص من المكونات المستخدمة لإنشاء صفحات جديدة على موقعك. يمكن أن تكون الصفحة مكونًا لأسترو ، أو ملف Markdown الذي يمثل بعض صفحة المحتوى لموقعك.

:::caution
`src/pages` هو مجلد فرعي **مطلوب** في مشروع أسترو الخاص بك. بدون ذلك ، لن يحتوي موقعك على صفحات أو طرق!
:::

### `src/components`

**العناصر** هي وحدات كود قابلة لإعادة الاستخدام في صفحات HTML الخاصة بك. يمكن أن تكون هذه [مكونات أسترو](/ar/basics/astro-components/) ، أو [مكونات إطار واجهة المستخدم](/ar/guides/framework-components/) مثل React أو VUE. من الشائع تجميع وتنظيم جميع مكونات المشروع معًا في هذا المجلد.

هذه اتفاقية شائعة في مشاريع أسترو ، لكنها غير مطلوبة. لا تتردد في تنظيم مكوناتك كما تريد!

### `src/layouts`

[التخطيطات](/ar/basics/layouts/) هي مكونات أسترو التي تحدد بنية واجهة المستخدم التي تشاركها صفحة واحدة أو [صفحات](/ar/basics/astro-pages/).

تماما مثل `src/components`, هذا المجلد هو اتفاقية شائعة ولكنها غير مطلوبة.

### `src/styles`

إنها اتفاقية شائعة لتخزين ملفات CSS أو SASS في مجلد `src/styles` ، لكن هذا غير مطلوب. طالما أن الأنماط تعيش في مكان ما في المجلد `/src` ويتم استيرادها بشكل صحيح ، فإن أسترو سوف يتعامل معها ويحسنها.

### `public/`

المجلد `public/` مخصص للملفات والأصول في مشروعك والتي لا تحتاج إلى معالجتها أثناء عملية بناء أسترو. سيتم نسخ الملفات الموجودة في هذا المجلد في مجلد Build دون مساس ، ثم سيتم بناء موقعك.

هذا السلوك يجعل `public/` مثالي للأصول الشائعة مثل الصور والخطوط ، أو الملفات الخاصة مثل `robots.txt` و` manifest.webmanifest`.

يمكنك وضع CSS و جافاسكريبت في دليل `/public` الخاص بك ، ولكن كن على علم بأن هذه الملفات لن يتم تجميعها أو تحسينها في البناء النهائي.

:::tip
كقاعدة عامة ، يجب أن تعيش أي CSS أو جافاسكريبت التي تكتبها بنفسك في مجلد `/src` .
:::

### `package.json`

هذا ملف يستخدمه مديري حزم جافاسكريبت لإدارة تبعياتك. كما أنه يحدد البرامج النصية التي يتم استخدامها بشكل شائع لتشغيل أسترو (على سبيل المثال: `npm start` ، `npm run build`).

هناك [نوعان من التبعيات](https://docs.npmjs.com/specifice-dependencies-and-devdedencies-in-a-package-json-file) يمكنك تحديدها في `package.json`:` dependencies` و `devdependencies`. في معظم الحالات ، تعمل هذه كما هي: يحتاج أسترو إلى جميع التبعيات في وقت الإنشاء ، وسيقوم مدير الحزمة بتثبيت كليهما. نوصي بوضع جميع تبعياتك في "التبعيات" للبدء ، واستخدام فقط "DevDependencies" إذا وجدت حاجة محددة للقيام بذلك.

للمساعدة في إنشاء ملف `package.json` الجديد لمشروعك ، تحقق من تعليمات [الإعداد اليدوي](/ar/install-and-setup/#manual-setup).

### `astro.config.mjs`

يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات التكوين لمشروع أسترو الخاص بك. هنا يمكنك تحديد التكامل لاستخدام الخيارات ، وخيارات الخادم ، والمزيد.

راجع [تكوين دليل أسترو](/ar/reference/configuration-reference/) للحصول على تفاصيل حول تكوينات الإعداد.

### `tsconfig.json`

يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات تكوين TypeScript لمشروع أسترو الخاص بك. بعض الميزات (مثل استيرادات حزمة npm) ليست مدعومة بالكامل في المحرر بدون ملف `tsconfig.json`.

راجع [دليل TypeScript](/ar/guides/typescript/)  للحصول على تفاصيل حول تكوينات الإعداد.
